<template>
  <div class="c-white m-t-60">
    <h1 class="m-40">注册</h1>
    <div class="m-t-48 m-l-40 m-r-60">
      <el-form :model="form" label-width="60px" class="form-box">
        <el-form-item label="账号" size="large">
          <el-input
            v-model="form.username"
            size="large"
            maxlength="20"
            clearable
            placeholder="请输入账号"
          />
        </el-form-item>
        <el-form-item label="密码" size="large">
          <el-input
            v-model="form.password"
            size="large"
            maxlength="20"
            type="password"
            show-password
            clearable
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="手机号" size="large">
          <el-input
            v-model="form.phone"
            size="large"
            maxlength="20"
            clearable
            placeholder="请输入手机号码"
          />
        </el-form-item>
        <el-form-item>
          <slot name="cut"></slot>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" size="large" style="width: 100%" @click="onSubmit(this.form)">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { userRegister } from "../api/user/User.js";
import { validatePhone } from "../util/common";

export default {
  name: "Register",
  data() {
    return {
      form: {
        username: "",
        password: "",
        phone: ""
      }
    };
  },
  methods: {
    onSubmit(formName) {
      userRegister(formName).then(res => {
        console.log(res);
        if (res.data.code == "300") {
          ElMessage({
            message: res.data.msg,
            type: "error",
            duration: 3000
          });
          return;
        }
        if (res.data.code == "200") {
          ElMessage({
            message: "注册成功",
            type: "success",
            duration: 1000
          });
          this.form.username = "";
          this.form.password = "";
          this.form.phone = "";
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.form-box :deep(.el-form-item__label) {
  color: white;
}
</style>
